<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <title>时间</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main-box {
      position: absolute;
      top: 0;
      left: 0;
    }

    #main-date,
    #main-time {
      white-space: nowrap;
    }

    #rule-date,
    #rule-time {
      display: inline-block;
    }
  </style>
</head>

<body>

  <svg class="main-box" id="main-date-box" xmlns="http://www.w3.org/2000/svg">
    <text id="main-date"></text>
  </svg>
  <svg class="main-box" id="main-time-box" xmlns="http://www.w3.org/2000/svg">
    <text id="main-time"></text>
  </svg>
  <span id="rule-date"></span>
  <span id="rule-time"></span>
  <span id="test"></span>
  <script>
    var html = document.documentElement;
    var timer;
    var mainDateBox = document.getElementById('main-date-box');
    var mainTimeBox = document.getElementById('main-time-box');
    var mainDate = document.getElementById('main-date');
    var mainTime = document.getElementById('main-time');
    var ruleDate = document.getElementById('rule-date');
    var ruleTime = document.getElementById('rule-time');
    var step = 1;

    var width = html.clientWidth;
    var height = html.clientHeight;

    var complete = function (value) {
      return value < 10 ? "0" + value : value;
    }

    var updateTime = function () {
      clearTimeout(timer);
      var nowTime = Date.now();
      var now = new Date(nowTime + 8 * 60 * 60 * 1000);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var week = now.getDay();
      var date = now.getDate();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();

      var dateStr = year + "-" + complete(month) + "-" + complete(date);
      var timeStr = complete(hour) + ":" + complete(minute) + (step === 60 ? '' : ":" + complete(second) )  + '  周' + ['日', '一', '二', '三', '四', '五', '六'][week];
      mainDate.textContent = dateStr;
      mainTime.textContent = timeStr;
      setTimer();
      return {
        date: dateStr,
        time: timeStr
      };
    }
    var setTimer = function () {
      timer = setTimeout(function () {
        updateTime();
      }, step * 1000);
    }

    var init = function () {
      // main.setAttribute('width', width);
      // main.setAttribute('height', height);
      var fs = height / 8;
      var fsPx = fs + 'px';
      ruleDate.style.fontSize = ruleDate.style.lineHeight = ruleTime.style.fontSize = ruleTime.style.lineHeight = fsPx;
      mainDate.style.fontSize = mainTime.style.fontSize = mainTime.style.lineHeight = mainTime.style.lineHeight = fsPx;
      var res = updateTime();


      var timeStr = res.time;
      var dateStr = res.date;
      ruleDate.innerText = dateStr;
      ruleTime.innerText = timeStr;

      var ruleDateWidth = ruleDate.clientWidth;
      var ruleDateHeight = ruleDate.clientHeight;
      var ruleTimeWidth = ruleTime.clientWidth;
      var ruleTimeHeight = ruleTime.clientHeight;
      mainDateBox.setAttribute('width', width);
      mainDateBox.setAttribute('height', height);
      mainTimeBox.setAttribute('width', width);
      mainTimeBox.setAttribute('height', height);
      mainDate.setAttribute('transform', 'rotate(90 0 0) translate(' + (height - ruleDateWidth) / 2 + ', -' + (width - ruleDateHeight + 1.5 * fs) / 2 + ')')
      mainTime.setAttribute('transform', 'rotate(90 0 0) translate(' + (height - ruleTimeWidth) / 2 + ', -' + (width - ruleTimeHeight - 1.5 * fs) / 2 + ')')

      ruleDate.innerHTML = '';
      ruleTime.innerHTML = '';
    }

    init();
    html.addEventListener('click', function () {
      step = (step === 60 ? 1 : 60);
      init();
    })
  </script>
</body>

</html>